<page-header />

<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="24">
    <nz-radio-group [(ngModel)]="currentMenuType" (ngModelChange)="filterMenuTree($event)" style="margin-right: 30px">
      @for (item of getTypleList(); track $index) {
      <label nz-radio-button [nzValue]="item.value" >{{item.label}}</label>
      }
    </nz-radio-group>
  </div>
  <div nz-col class="gutter-row custom-scrollbar" [nzSpan]="6">
    <nz-card nzTitle="菜单" [nzExtra]="menuTemplate">
      <nz-tree
        nzBlockNode
        [nzData]="nodes"
        [nzSelectedKeys]="selectedNodes"
        nzShowLine
        nzDraggable
        nzShowIcon
        (nzClick)="menuClick($event)"
        (nzOnDragEnd)="menuDrag($event)"
        nzVirtualHeight="660px"
        [nzTreeTemplate]="nzTreeTemplate">
        <ng-template #nzTreeTemplate let-node let-origin="origin">
          <div>
            <span>{{ node.title }}</span>
            @if(node.origin?.menu) {
              <i nz-icon [nzType]="node.origin.menu?.icon" style="font-size: 14px; margin-left: 5px;"
                [style]="node.origin.menu?.fill ? 'color:' + node.origin.menu?.fill : '1677ff'"></i>
            }
          </div>
          </ng-template>
        </nz-tree>
    </nz-card>
    <ng-template #menuTemplate>
      <nz-radio-group [(ngModel)]="currentMenuFiler" (ngModelChange)="queryMenuTree()" style="margin-right: 30px">
        <label nz-radio-button nzValue="">全部</label>
        <label nz-radio-button nzValue="false">启用</label>
        <label nz-radio-button nzValue="true">禁用</label>
      </nz-radio-group>
      <button (click)="add()" nz-button acl [acl-ability]="'add'" nzType="primary">新建</button>
    </ng-template>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <nz-card nzTitle="详情">
      @if (currentMenu && currentMenu.parentId) {
        <sf
          #sf
          mode="edit"
          [schema]="schema"
          [ui]="ui"
          [formData]="currentMenu"
          (formSubmit)="save($event)"
          (formReset)="reset($event)"
          (formValueChange)="formValueChange($event)"
        >
          <ng-template sf-template="iconInfo" let-i let-ui="ui" let-schema="schema">
            <div nz-row>
              @if (i.value) {
                <div nz-col nz-col [nzSpan]="12">
                  <i
                    nz-icon
                    [nzType]="i.value.value"
                    style="font-size: 24px; width: 50px"
                    [style]="i.value.fill ? 'color:' + i.value.fill : ''"
                  ></i>
                </div>
              } @else {
                <div nz-col nz-col [nzSpan]="12">
                  <span>请选择</span>
                </div>
              }
              <div nz-col [nzSpan]="12">
                <nz-radio-group>
                  <button nz-button type="button" nzType="link" nzSize="small" (click)="choseIcon()">选择图标</button>
                  <button nz-button type="button" nzType="link" nzSize="small" (click)="deleteIcon()">删除图标</button>
                </nz-radio-group>
              </div>
            </div>
          </ng-template>
        </sf>
      }
    </nz-card>
    @if (currentMenu && currentMenu.id && !currentMenu.deleted) {
      <nz-card nzTitle="权限" [nzExtra]="permisionTemplate">
        <st [widthMode]="{ type: 'strict' }" [data]="currentMenuPermissions" [columns]="permissionColmuns" />
      </nz-card>
      <ng-template #permisionTemplate>
        <nz-radio-group [(ngModel)]="currentPermissionFilter" (ngModelChange)="queryPermission()" style="margin-right: 30px">
          <label nz-radio-button nzValue="">全部</label>
          <label nz-radio-button nzValue="false">启用</label>
          <label nz-radio-button nzValue="true">禁用</label>
        </nz-radio-group>
        <button nz-button nzType="primary" (click)="addPermission()">添加</button>
      </ng-template>
    }
  </div>
</div>
